<template>
  <view class="register-container">
    <view class="register-header">
      <text class="title">账号注册</text>
      <text class="subtitle">ACCOUNT REGISTER</text>
    </view>
    
    <view class="register-content">
      <view class="register-header">
        <view class="logo">
          <text style="color: #2989d8; font-size: 24px;">医</text>
        </view>
        <view class="app-name">智慧医疗</view>
      </view>
      
      <view class="register-form">
        <view class="form-title">注册账号</view>
        
        <view class="form-item">
          <text class="form-label">手机号</text>
          <view class="input-wrapper" :class="{'active': activeInput === 'phone'}">
            <text class="input-icon">📱</text>
            <input 
              type="text" 
              v-model="phone" 
              placeholder="请输入手机号" 
              class="form-input"
              @focus="activeInput = 'phone'"
              @blur="activeInput = ''"
            />
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label">身份证号</text>
          <view class="input-wrapper" :class="{'active': activeInput === 'idCard'}">
            <text class="input-icon">🪪</text>
            <input 
              type="text" 
              v-model="idCard" 
              placeholder="请输入身份证号" 
              class="form-input"
              @focus="activeInput = 'idCard'"
              @blur="activeInput = ''"
            />
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label">验证码</text>
          <view class="verification-group">
            <view class="input-wrapper verification-input-wrapper" :class="{'active': activeInput === 'code'}">
              <text class="input-icon">🔑</text>
              <input 
                type="text" 
                v-model="code" 
                placeholder="请输入验证码" 
                class="form-input"
                @focus="activeInput = 'code'"
                @blur="activeInput = ''"
              />
            </view>
            <button 
              class="verification-button" 
              :class="{'disabled': countdown > 0}"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
            </button>
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label">密码</text>
          <view class="input-wrapper" :class="{'active': activeInput === 'password'}">
            <text class="input-icon">🔒</text>
            <input 
              :type="showPassword ? 'text' : 'password'" 
              v-model="password" 
              placeholder="请输入密码" 
              class="form-input"
              @focus="activeInput = 'password'"
              @blur="activeInput = ''"
            />
            <text 
              class="password-toggle" 
              @click="showPassword = !showPassword"
            >{{showPassword ? '👁️' : '👁️‍🗨️'}}</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label">确认密码</text>
          <view class="input-wrapper" :class="{'active': activeInput === 'confirmPassword'}">
            <text class="input-icon">🔒</text>
            <input 
              :type="showConfirmPassword ? 'text' : 'password'" 
              v-model="confirmPassword" 
              placeholder="请再次输入密码" 
              class="form-input"
              @focus="activeInput = 'confirmPassword'"
              @blur="activeInput = ''"
            />
            <text 
              class="password-toggle" 
              @click="showConfirmPassword = !showConfirmPassword"
            >{{showConfirmPassword ? '👁️' : '👁️‍🗨️'}}</text>
          </view>
        </view>
        
        <view class="agreement">
          <checkbox :checked="agreed" @click="agreed = !agreed" color="#2989d8" />
          <text class="agreement-text">
            我已阅读并同意
            <text class="link">《用户协议》</text>
            和
            <text class="link">《隐私政策》</text>
          </text>
        </view>
        
        <button class="register-btn" :class="{'button-active': isButtonActive}" @touchstart="buttonTouchStart" @touchend="buttonTouchEnd" @click="handleRegister">
          <text class="button-text">注 册</text>
          <view class="button-effect"></view>
        </button>
        
        <view class="login-link">
          <text>已有账号？</text>
          <text class="link" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { API } from '@/config/api.js'

export default {
  components: {
  },
  data() {
    return {
      phone: '',
      idCard: '',
      code: '',
      password: '',
      confirmPassword: '',
      agreed: false,
      countdown: 0,
      activeInput: '',
      isButtonActive: false,
      showPassword: false,
      showConfirmPassword: false
    }
  },
  methods: {
    buttonTouchStart() {
      this.isButtonActive = true
    },
    buttonTouchEnd() {
      this.isButtonActive = false
    },
    handleRegister() {
      // 表单验证
      if (!this.phone || !this.idCard || !this.code || !this.password || !this.confirmPassword) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }
      
      if (!this.agreed) {
        uni.showToast({
          title: '请阅读并同意用户协议和隐私政策',
          icon: 'none'
        })
        return
      }
      
      // 验证身份证号格式
      if (!/^\d{17}[\dXx]$/.test(this.idCard)) {
        uni.showToast({
          title: '请输入正确的18位身份证号',
          icon: 'none'
        })
        return
      }
      
      // 显示加载中
      uni.showLoading({
        title: '注册中...'
      })
      
      // 打印请求数据，用于调试
      console.log('注册请求数据:', {
        userId: this.idCard,
        userIdType: 'idcard', // 添加标识，表明userId是身份证号，不需要加密
        userName: this.phone, // 使用手机号作为用户名
        nickName: '用户' + this.phone.substring(this.phone.length - 4), // 使用手机号后4位作为昵称
        phonenumber: this.phone, // 注意后端字段名可能是phonenumber而不是phone
        phone: this.phone, // 添加phone字段，确保后端能接收到
        code: this.code,
        password: this.password
      })
      
      // 调用注册API
      uni.request({
        url: API.USER.REGISTER,
        method: 'POST',
        data: {
          userId: this.idCard, // 使用身份证号作为user_id
          userIdType: 'idcard', // 添加标识，表明userId是身份证号，不需要加密
          userName: this.phone, // 使用手机号作为用户名
          nickName: '用户' + this.phone.substring(this.phone.length - 4), // 使用手机号后4位作为昵称
          phonenumber: this.phone, // 注意后端字段名可能是phonenumber而不是phone
          phone: this.phone, // 添加phone字段，确保后端能接收到
          code: this.code,
          password: this.password,
          sex: '0', // 默认性别
          status: '0' // 默认状态
        },
        success: (res) => {
          uni.hideLoading()
          
          if (res.data && res.data.code === 200) {
            // 存储token
            if (res.data.token) {
              uni.setStorageSync('token', res.data.token)
            }
            // 存储用户信息
            if (res.data.userInfo) {
              uni.setStorageSync('userInfo', res.data.userInfo)
            }
            
            uni.showToast({
              title: '注册成功',
              icon: 'success'
            })
            
            // 跳转到登录页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } else {
            uni.showToast({
              title: res.data.msg || '注册失败',
              icon: 'none',
              duration: 3000
            })
            console.error('注册失败:', res.data)
          }
        },
        fail: (err) => {
          uni.hideLoading()
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
          console.error('注册失败:', err)
        }
      })
    },
    sendCode() {
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送: 123456',
        icon: 'success',
        duration: 3000
      })
      
      // 自动填充验证码
      this.code = '123456'
      
      // 开始倒计时
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    goToLogin() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.register-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #0a4c8f 0%, #2989d8 50%, #1e5799 100%);
}

.register-content {
  width: 100%;
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.6s ease-out;
  border: 1px solid rgba(41, 137, 216, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.register-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.logo {
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(41, 137, 216, 0.2);
  transition: transform 0.3s ease;
  border: 2px solid rgba(41, 137, 216, 0.3);
}

.logo:active {
  transform: scale(0.95);
}

.app-name {
  font-size: 24px;
  font-weight: bold;
  color: #2989d8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.register-form {
  display: flex;
  flex-direction: column;
}

.form-title {
  font-size: 22px;
  font-weight: bold;
  color: #2989d8;
  margin-bottom: 25px;
  text-align: center;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  font-size: 14px;
  color: #2989d8;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid #d0e1f2;
  border-radius: 12px;
  padding: 0 15px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.input-wrapper.active {
  border-color: #2989d8;
  box-shadow: 0 0 0 2px rgba(41, 137, 216, 0.1);
}

.input-icon {
  margin-right: 10px;
  font-size: 16px;
  color: #2989d8;
}

.form-input {
  flex: 1;
  height: 100%;
  border: none;
  font-size: 16px;
  background: transparent;
  color: #333;
}

.form-input:focus {
  outline: none;
}

.verification-group {
  display: flex;
  gap: 10px;
}

.verification-input-wrapper {
  flex: 1;
}

.verification-button {
  padding: 0 20px;
  background: #2989d8;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 5px rgba(41, 137, 216, 0.3);
}

.verification-button.disabled {
  background: #b0c4de;
  cursor: not-allowed;
  box-shadow: none;
}

.password-toggle {
  padding: 5px;
  color: #2989d8;
  cursor: pointer;
}

.agreement {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.agreement-text {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
  line-height: 1.4;
}

.link {
  color: #2989d8;
  cursor: pointer;
  transition: opacity 0.3s ease;
  font-weight: 500;
}

.link:active {
  opacity: 0.7;
}

.register-btn {
  position: relative;
  height: 50px;
  background: linear-gradient(135deg, #0a4c8f, #2989d8);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(41, 137, 216, 0.3);
}

.button-text {
  position: relative;
  z-index: 1;
}

.button-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.button-active .button-effect {
  width: 200%;
  height: 200%;
}

.login-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}
</style> 